<template>
  <div class="Hospitals">
    <div class="center">
      <div class="title" v-for="(item, index) in folk" :key="index">
        <div>{{ item.t1 }}</div>
        <div>{{ item.t2 }}</div>
        <div>{{ item.t3 }}</div>
        <div>{{ item.t4 }}</div>
      </div>
      <p class="img"><img src="../assets/flower1.png" alt="" /></p>
      <div class="con" v-for="(item, index) in folks" :key="index">
        <router-link :to="{name:'Folk',params:{id:item.id}}" class="cons">
          <div class="left">
            <img :src="item.thumb" alt="" />
          </div>
          <div class="right">
            <p class="red">{{ item.title }}</p>
            <p class="two">{{ item.content }}</p>
            <p class="line">{{ item.content }}</p>
            <p class="line">{{ item.content }}</p>
          </div>
        </router-link>
      </div>
      <p class="img"><img src="../assets/flower1.png" alt="" /></p>
      <Page></Page>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import axios from 'axios'
import Page from "@/components/paging.vue";
export default {
  name: "Hospitals",
  components: {
    Page,
  },
  data: function() {
    return {
      folk: [
        {
          t1:'民',
          t2:'间',
          t3:'方',
          t4:'术',
          url:'Folk',
          url1:require('../assets/flower1.png'),
          
        }
      ],
      folks:[
                  // {
                  //   url2:require('../assets/folk1.png'),
                  //   title:'凤眼果怎么吃?',
                  //   text:'凤眼果是一种营养价值很高的中药材，它的食用功效和药用功效都很高，它的种仁里面自带香气，用来烹饪味...',
                  //   li1:'凤眼果是一种营养价值很高的中药材，它的食用功效和药用功效都很...',
                  //   li2:'凤眼果是一种营养价值很高的中药材，它的食用功效和药用功效都很...'
                  // }
                  
          ]
    };
  },
  mounted:function(){
    axios
      .post('/fangshu/fangshu')
      .then((res) => {
        // console.log(res.data.data.length);
        // this.folks=res.data.data;console.log(this.folks)
        for (let i = 0; i < res.data.data.length - 2; i++) {
          // const element = array[i];
          // console.log(i);
          this.folks.push(res.data.data[i])
        }
        // console.log(this.folks)
        })
      .catch((err)=>{console.log(err)})
  },
  created:function(){
    $(function(){
      $(".two").css("border","#f00")
    })
  }
};
</script>

<style scoped>
.Hospitals {
  width: 100%;
  background-color: #fce7d7;
  padding-bottom: 100px;
}
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 99px;
  padding-bottom: 59px;
}
.title div {
  width: 70px;
  line-height: 70px;
  background-color: #a40100;
  text-align: center;
  font-size: 38px;
  font-family: "楷体";
  color: white;
  border-radius: 35px;
  margin-right: 10px;
}
.img {
  width: 90%;
  margin: 0 auto;
}
.img img {
  width: 100%;
}
.con {
  width: 85%;
  margin: 0 auto;
  margin-top: 30px;overflow: hidden;
}
.cons {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: left;
  box-sizing: border-box;
  padding: 10px 0px;
}
.con:nth-child(even)>.cons{
  display:block;
  overflow: hidden;
}
.con:nth-child(even)>.cons .left{
  float:right;
}
.con:nth-child(even)>.cons .right{
 float:left;
}
.con .left {
  width: 30%;
  box-sizing: border-box;
  text-align: center;
  margin-left: 30px;
}
.con .left img {
  width: 95%;
  margin: 0 auto;
  margin-top: 7px;
  transition: all 0.6s;
}
.con .left img:hover {
  transform: scale(1.1);
}
.con .right {
  width: 49%;
  box-sizing: border-box;
  margin-left: 80px;
}
.con .right p {
  color: #666666;
  font-size: 20px;
  padding: 6px 0px;
  line-height: 36px;
}
.con .right .red {
  color: #a40000;
  font-weight: bolder;
  font-size: 24px;
}
.con .right .line {
  background: url("../assets/hua.png") left center no-repeat;
  padding-left: 5%;
  border-bottom: 2px solid #a40000;
  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.two{text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
</style>
